<!-- 修改用户名 changeUsername  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-45">
      <view class="head-title ss-m-b-20">修改用户名</view>
    </view>

    <!-- 表单项 -->
    <uni-forms
      ref="formRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="140"
      labelAlign="center"
    >
		<view class="inputBox ss-flex">
		  <uni-forms-item name="username" label="用户名">
			  <view class="contentBorder">
				<uni-easyinput
				  placeholder="请输入用户名"
				  v-model="state.model.username"
				  :inputBorder="false"
				></uni-easyinput>
			  </view>
		  </uni-forms-item>
		</view>
		<view class="tipsBox ss-p-l-4">
			<view class="tipsBox-item">
				用户名限制2-20个字符，一个汉字为一个字符
			</view>
		</view>
      <view class="editPwd-btn-box ss-m-t-50">
        <button class="ss-reset-button save-btn" @tap="changeUsernameSubmit">
          保存
        </button>
      </view>
    </uni-forms>
  </view>
</template>

<script setup>
  import { computed, watch, ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { username } from '@/sheep/validate/form';
  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
  const formRef = ref(null);

  // 数据
  const state = reactive({
    model: {
      username: '',
    },
    rules: {
      username,
    },
  });

  // 7.修改用户名
  async function changeUsernameSubmit() {
    const validate = await unref(formRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
    sheep.$api.user.changeUsername(state.model).then((res) => {
      if (res.error === 0) {
        sheep.$store('user').getInfo();
        closeAuthModal();
      }
    });
  }
</script>

<style lang="scss" scoped>
  @import '../index.scss';
  .head-box{
	  .head-title{
		  font-family: Source Han Sans;
		  font-size: 36rpx !important;
		  font-weight: 500 !important;
		  line-height: normal;
		  text-align: center;
		  color: #404040;
	  }
  }
  .contentBorder{
  	  
  	  border-bottom: 2rpx solid #D8D8D8;
  }
  .tipsBox{
		margin-top: 20rpx;
	  .tipsBox-item{
		  font-family: Source Han Sans;
		  font-size: 28rpx;
		  font-weight: normal;
		  line-height: normal;
		  letter-spacing: normal;
		  color: #9E9E9E;
	  }
  }
  .inputBox{
	  &>view{
		  flex:1;
	  }
	  padding:20rpx 20rpx 10rpx 30rpx;
	  width: 690rpx;
	  height: 94rpx;
	  box-sizing: border-box;
	  border-radius: 20rpx;
	  // background: #EEEEEE;
  }
  .save-btn{
	  width: 685rpx !important;
	  height: 100rpx !important;
	  border-radius: 100rpx !important;
	  background: #2B6EDE !important;
	  font-family: Source Han Sans;
	  font-size: 36rpx !important;
	  font-weight: bold;
	  line-height: normal;
	  letter-spacing: normal;
	  color: #FFFFFF;
  }
</style>
